﻿.cmain_top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 8vh;
    background: url('../img//zhdd/topbar.png') no-repeat;
    background-size: 100%;
    font-size: 3vh;
    font-weight: bold;
    text-align: center;
    z-index: 2;
    color: #fff;
}
.cmain_top span {
    font-size: 5vh;
    line-height: 6vh;
    margin-left: 2vw;
    height: 5vh;
    color: #04D3FF;
    font-family:'楷体'
}
.header_title {
    margin-left: 10px;
    height: 8vh;
    margin-top: -3px;
    line-height: 8vh;
    font-size: 18px;
    font-weight: 600;
    font-family: 黑体;
    cursor: pointer;
    position: absolute;
}
.header_txt {
    height: 6vh;
    /* line-height: 6vh; */
    font-size: 2vh;
    margin-right: 10px;
    position: absolute;
    top: 0px;
    text-align: left;
    right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header_txt .splite {
    width: 1px;
    height: 6vh;
    background: #FFFFFF;
    margin:0 5px
}
.seltypeitem:after {
    content: "";
    width: 3px;
    height: 11px;
    float: left;
    display: block;
    margin-top: 3px;
    margin-right: 5px;
    background: #3A499A;
}


.layui-colla-title {
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 15px 0 35px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    overflow: hidden;
    background: #1268C9;
}

.cmain_content {
    position: absolute;
    top: 8%;
    bottom: 0;
    width: 100%;
    background: #FFFFFF;
}

.cmain_menu {
    position: absolute;
    left: 50%;
    margin-left: -228px;
}

.cmain_menu_item {
    cursor: pointer;
    float: left;
    margin: 0 25px;
    line-height: 40px;
    color: #FFFFFF;
    opacity: 0.5;
    position: relative;
}

.cmain_menu_item.selmenu {
    opacity: 1;
    font-weight: bold;
}

.cmain_menu_item.selmenu:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -14px;
    width: 28px;
    height: 3px;
    background: #FFFFFF;
}

.logo {
    margin-left: 30px;
    color: #FFFFFF;
    line-height: 40px;
    float: left;
}

.seach_input {
    margin-left: 45px;
    height: 22px;
    margin-top: 9px;
    width: 180px;
    background:;
    border-radius: 11px;
    background: #4557B6 url(../img/zhdd/seach.png) no-repeat 155px 3px;
    text-indent: 12px
}

.headimg {
    float: right;
    height: 40px;
    border-left: 1.5px solid #31408F;
}

.headimg img {
    width: 24px;
    height: 24px;
    margin: 8px 10px;
    border-radius: 50%;
    background: #7688EB;
    margin-right: 13px;
}

.user-info {
    float: right;
    line-height: 40px;
    color: #FFFFFF;
    font-size: 12px;
    border-right: 1.5px solid #48559A;
    padding: 0 10px;
}

.left_menu {
    position: fixed;
    top: 80px;
    right: 10px;
    height: 53px;
    transition: all .3s;
    z-index: 9999;
    overflow: hidden;
    padding-right: 10px;
    text-align: right;
    display: flex;
    flex-direction: row-reverse;
}
.left_menu:hover {
    height: 100%;
}
.right_item_wrap {
    text-align: right;
}
.left_menu_item {
    height: 36px;
    width: 36px;
    background: #3A499A;
    border: 2px solid #FFFFFF;
    box-shadow: 2px 1px 5px 0px rgba(20, 20, 20, 0.52);
    border-radius: 18px;
    font-size: 14px;
    line-height: 32px;
    margin-top: 10px;
    overflow: hidden;
    transition: all .4s;
    cursor: pointer;
    display: inline-block;
}
.left_menu_item label {
    float: left;
    margin-left:10px
}
.left_menu_item:hover {
    width: 102px;
}
.left_menu_item:hover label {
}
.left_menu_item a {
    width: 100%;
    height: 100%;
    display: block;
    color: #fff;
    box-shadow: inset 0px 0px 3px 2px #4790C3;
    border-radius: 16px;
}

.left_menu_item img {
    width: 16px;
    height: 16px;
    margin: 8px;
}
/***************************综合************************/
.bmap {
    width: 100%;
    height: 100%;
}

.anchorBL {
    display: none;
}

.shrink {
    position: absolute;
    height: 60px;
    width: 20px;
    background: url(../img/zhdd/right.png) no-repeat;
    background-size:100% 100%;
    top: 0;
    right: -13px;
}

.left_box {
    transition: All 0.4s;
    -webkit-transition: All 0.4s;
    -moz-transition: All 0.4s;
    -o-transition: All 0.4s;
    position: absolute;
    z-index: 999;
    left: 0;
    top: 30px;
    bottom: 13px;
    width: 21%;
    padding: 10px 8px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.35);
}

.left_box.hide {
    left: -21%
}

.left_chart_box {
    position: relative;
    padding: 0 8px;
    width: 100%;
    height: 32%;
    margin-bottom: 4%;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    box-shadow: 0px 0px 6px 2px rgba(68, 130, 230, 0.15);
}

.left_chart_box:last-child {
    margin-bottom: 0;
    height: 32%;
}

.left_chart_head {
    height: 30px;
    line-height: 30px;
    width: 100%;
    border-bottom: 1px solid #EEEEEE;
    color: #343434;
    font-size: 14px;
}

.left_chart_content {
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 8px;
    right: 8px;
}

.top_box {
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 30px;
    margin-left: -225px;
    width: 450px;
    height: 83px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    padding: 0 15px;
}

.top_type_item {
    width: 20%;
    float: left;
    height: 100%;
    position: relative;
}

.top_type_item img {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    margin-top: 20px;
}

.top_type_item p {
    line-height: 30px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

.top_type_item.selitem img {
    width: 34px;
    height: 34px;
    margin-top: 10px;
}

.top_type_item.selitem:after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    height: 4px;
    background: #FFFFFF;
}

.right_top_box {
    position: absolute;
    z-index: 999;
    right: 0px;
    bottom: 15px;
    height: 44px;
    /*box-shadow: rgba(58, 74, 154, 0.32) 1px 1px 5px 0px;*/
    width: 373px;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px;
    color: #04D3FF;

    /*background: rgb(255, 255, 255);*/
}

.right_top_item {
    margin-right: 25px;
    text-align: center;
    background: #12386B;
    border: 1px solid #04D3FF;
    padding: 7px;
}

.right_top_item:last-child {
    margin-right: 0px;
}

.right_top_item img {
    height: 30px;
    width: 30px;
    /*float: left;*/
    /*margin-right: 5px;*/
}

.right_top_item .fl p {
    line-height: 12px;
    font-size: 12px;
    color: #888888;
}

.right_top_item .fl p:last-child {
    margin-top: 6px;
}

.right_top_item .fl p label {
    font-size: 13px;
    color: #000000;
    font-weight: bold;
}

.right_top_item .fl p b {
    color: #999999;
}

.right_box {
    transition: All 0.4s;
    -webkit-transition: All 0.4s;
    -moz-transition: All 0.4s;
    -o-transition: All 0.4s;
    z-index: 999;
    position: fixed;
    right: 0;
    top: 60px;
    bottom: 125px;
    width: 30%;
    padding: 3px 15px;
    background: #0E103D;
    /*opacity: 0.85;*/
    background: url(../img/zhdd/背景.png) no-repeat;
    background-size: 100% 100%;
    border: 1px solid #EEEEEE;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.35);
    height: 60vh;
}

.right_box .shrink {
    left: -20px;
    background: url(../img/zhdd/收缩键@2x.png) no-repeat;
    background-size: 100% 100%;
}

.layer_left_top .shrink {
    right: -20px;
    background: url(../img/zhdd/收缩键@2x.png) no-repeat;
    background-size: 100% 100%;
}

    .right_box.hide {
        left: 100% !important;
    }
.layer_left_top.hide {
    left: -258px !important
}

.right_box_title {
    line-height: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

.ocx_box {
    position: absolute;
    top: 40px;
    bottom: 10px;
    left: 15px;
    right: 15px;
}
/*********************************图层管理*******************************/
.bodybg {
    background: #F0F2F5;
}

.layer_left {
    position: absolute;
    left: 0;
    top: 13px;
    bottom: 15px;
    width: 240px;
    background: #FFFFFF;
}

.layer_center {
    position: absolute;
    left: 250px;
    top: 13px;
    bottom: 15px;
    right: 360px;
    background: #FFFFFF;
}

.layer_right {
    position: absolute;
    right: 0;
    top: 13px;
    bottom: 15px;
    width: 350px;
    background: #FFFFFF;
}

.layer_map {
    width: 100%;
    height: 100%;
}

.layer_left_head {
    height: 100%;
    width: 100%;
    padding: 10px;
}

.layer_tree_type {
    width: 100%;
    padding: 0px 10px;
    height: 5vh;
    background: linear-gradient(90deg, #06A5EC 0%, rgba(8, 166, 236, 0) 100%);
}

.tree_type_item {
    float: left;
    font-size: 12px;
    color: #fff;
    margin-right: 20px;
}
.tree_type_item_tool {
    float: left;
    font-size: 12px;
    color: #fff;
    margin-right: 20px;
}

.bumen {
    width: 11px;
    height: 11px;
    float: left;
    display: block;
    margin-top: 3px;
    margin-right: 5px;
    background: url(../img/zhdd/bumen.png) no-repeat ;
    background-size: 100% 100%;
}
.wuzi {
    width: 11px;
    height: 11px;
    float: left;
    display: block;
    margin-top: 3px;
    margin-right: 5px;
    background: url(../img/zhdd/wuzi.png) no-repeat;
    background-size: 100% 100%;
}

.tree_type_item img {
    width: 11px;
    height: 13px;
    margin-top: 1px;
    margin-right: 2px;
}

.layer_left_content_top {
    width: 100%;
    padding: 10px;
    bottom: 0;
    /*height: 30%;*/
    height: 60vh;
    overflow-y: auto;
}
.layer_left_content_bottom {
    width: 100%;
    padding: 10px;
    bottom: 0;
    /*height: 45%;*/
    overflow-y: auto;
}

.layer_seach {
    width: 100%;
    height: 30px;
    background: #051747;
}

.layer_seach_left {
    position: relative;
    width: 55px;
    height: 30px;
    text-align: center;
    color: #141414;
    font-size: 12px;
    line-height: 31px;
    float: left;
}

.layer_seach_left:after {
    content: "";
    width: 1px;
    height: 18px;
    position: absolute;
    top: 6px;
    right: 0;
    background: #4556B6;
}

.layer_seach input {
    width: 208px;
    height: 30px;
    float: left;
    border: none;
    background: none;
    font-size: 12px;
    padding: 0 5px;
    color: #fff;
}

.layer_seach_right {
    cursor: pointer;
    float: left;
    height: 30px;
    width: 30px;
    background: #04D3FF;
    text-align: center;
    line-height: 30px;
}

.layer_label {
    padding: 8px 0;
}

.layer_label span {
    padding: 2px 8px;
    padding-bottom: 4px;
    background: #596BCF;
    color: #fff;
    font-size: 12px;
    margin-right: 10px;
}

.layer_label span.sellabel {
    background: #2336A0;
}

.layer_menu {
    /* width: 536px; */
    height: 73px;
    position: absolute;
    z-index: 99;
    bottom: 14px;
    padding: 9px;
    left: 51%;
    margin-left: -180px;
    /* background: #3A499A; */
    /* background: url(../img/zhdd/box.png); */
    background-size: 100% 100%;
    /* box-shadow: 0px 1px 5px 0px rgba(58, 73, 154, 0.32); */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.layer_menu_item {
    width: 62px;
    height: 62px;
    margin-right: 8px;
    /*background: #5465C0;
    border: 1px solid #5465C0;*/
    color: #F5FFFA;
}


.layer_menu_item:last-child {
    margin-right: 0px;
}

.layer_menu_item p {
    font-size: 12px;
    text-align: center;
}

.layer_menu_item img {
    display: block;
    width: 25px;
    height: 25px;
    margin: 3px auto;
    margin-top: 12px;
}

.layer_menu_item.layer_selmenu {
    border: 2px solid #8D9DF2;
    color:#fff;
}

.layer_tool {
    position: fixed;
    z-index: 99;
    bottom: 64px;
    left: 279px;
    width: 65px;
    height:298px;
    transition: all .4s;
    background: #1C2C7F;
    border: 1px solid #06A3EB;
    opacity: 0.9;
    border-radius: 17px;
    color: #fff;
    cursor: move;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 0px 1px 5px 0px rgba(58, 73, 154, 0.32);
}
.layer_tool_item {
    height: 62px;
    width: 62px;
    margin-top: 0px;
    color: #fff;
    cursor: pointer;
    border-bottom: 1px solid #06A3EB;
}
.layer_tool_item:first-child {
    margin-top: 12px;
}
.layer_tool_item:last-child {
    margin-bottom: 12px;
}
.tool_selmenu {
    background: #06A3EB;
    border: 1px solid #04D3FF;
}
.layer_tool_item:last-child {
    margin-right: 0px;
    border-bottom: 0px solid #06A3EB;
}

.layer_tool_item p {
    font-size: 12px;
    text-align: center;
}

.layer_tool_item img {
    display: block;
    width: 25px;
    height: 25px;
    margin: 3px auto;
    margin-top: 12px;
}

.layer_tool_item.layer_selmenu {
    border: 2px solid #8D9DF2;
    color: #fff;
}
.boxhide {
    width: 20px;
    height: 63px;
    float: left;
    position: absolute;
    top: -5px;
    left: -15px;
    background: url(../img/zhdd/left.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.layer_nav {
    position: absolute;
    z-index: 99;
    top: 14px;
    left: 14px;
    background: #FFFFFF;
    box-shadow: 0px 1px 5px 0px rgba(58, 73, 154, 0.32);
}
/***********************报警信息********************/
.where_line {
    padding: 10px 0;
}

.where_line .layui-form-item {
    margin-bottom: 0;
    background: #fff;
    padding: 20px 0;
}

.where_line .layui-form-item .layui-inline {
    margin-bottom: 0;
}

.where_line .layui-input {
    height: 30px;
}

.where_line .layui-form-label {
    padding: 5px 15px;
}

.where_line button {
    padding: 5px 10px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    margin-right: 15px;
}

.where_line button.btnbg1 {
    background: #1890FF;
    border: 1px solid #0077FF;
}

.where_line button.btnbg2 {
    background: #24CDF7;
    border: 1px solid #21B2D6;
}

.where_line button.btnbg3 {
    background: #FF6666;
    border: 1px solid #FF4343;
}

.where_line button.btnbg4 {
    background: #33CCCC;
    border: 1px solid #00BFBF;
}

.where_line button.clearbtn {
    border: 1px solid #3E3E3E;
    background: #FFFFFF;
    color: #3E3E3E;
}

.where_line button.layui-laypage-btn {
    color: #333;
}

.child_content {
    position: absolute;
    top: 93px;
    bottom: 0;
    width: 100%;
    background: #FFFFFF;
    padding-top: 7px;
}

.grade1 {
    padding: 2px 10px;
    background: #FFFF00;
    border-radius: 3px;
    color: #fff;
}

.grade2 {
    padding: 2px 10px;
    background: #F2A935;
    border-radius: 3px;
    color: #fff;
}

.grade3 {
    padding: 2px 10px;
    background: #5D35F2;
    border-radius: 3px;
    color: #fff;
}
.grade4 {
    padding: 2px 10px;
    background: #FF9933;
    border-radius: 3px;
    color: #fff;
}
.grade5 {
    padding: 2px 10px;
    background: #FF3300;
    border-radius: 3px;
    color: #fff;
}
/************************综合统计********************/
.tab_line {
    width: 100%;
    height: 60px;
    border-bottom: 3px solid #3A499A;
}

.tab_line ul {
    width: 100%;
    height: 100%;
}

.tab_line ul li {
    cursor: pointer;
    float: left;
    height: 35px;
    width: 140px;
    border-radius: 3px 3px 0px 0px;
    background: #E4EAF1;
    color: #92A2B4;
    margin-right: 10px;
    font-size: 14px;
    text-align: center;
    line-height: 35px;
    margin-top: 22px;
}

.tab_line ul li.seltab {
    height: 43px;
    line-height: 43px;
    margin-top: 14px;
    color: #FFFFFF;
    background: #3A499A;
}

.child_content_top {
    width: 97%;
    margin: 0 auto;
    height: 48%;
    margin-top: 1%;
}

.child_content_bottom {
    width: 97%;
    margin: 0 auto;
    height: 43%;
    margin-top: 1.5%;
}

.child_chart {
    position: relative;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    box-shadow: 0px 0px 7px 0px rgba(81, 81, 81, 0.3);
    float: left;
    padding: 15px 10px;
}

.child_chart_head {
    padding: 0 10px;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    color: #3A3A3A;
    position: relative;
    font-weight: bold;
}

.head_center {
    position: absolute;
    left: 50%;
    top: 0px;
    margin-left: -134px;
}

.head_center span {
    cursor: pointer;
    width: 48px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border: 1px solid transparent;
    color: #999999;
    font-size: 14px;
    display: inline-block;
    font-weight: normal;
}

.head_center span.seltype {
    background: #EFF2FF;
    border: 1px solid #3A499A;
    border-radius: 13px;
    color: #3A499A;
}

.child_chart_head .fr {
    line-height: 24px;
}

.child_chart_head .fr button {
    padding: 3px 7px;
    background: #33CCCC;
    border: 1px solid #00BFBF;
    color: #fff;
    font-size: 12px;
    font-weight: 100;
    margin-left: 10px;
}

.child_chart_head .fr button.bg-dy {
    background: #33CC77;
    border: 1px solid #21B161;
}

.child_chart_content {
    position: absolute;
    top: 45px;
    bottom: 0;
    left: 0;
    right: 0;
}

.legend_line {
    width: 80%;
    margin-top: 15%;
    height: 25%;
}

.legend_line:first-child {
    margin-top: 25%;
}

.legend_box {
    position: relative;
    display: inline-block;
    background: #E3F5FF;
    width: 48%;
    height: 100%;
    color: #2FA4FF;
}

.data_box {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 100%;
}

.legend_box p {
    text-align: center;
    font-size: 12px;
    line-height: 20px;
}

.legend_box p.num {
    font-size: 18px;
}

.legend_box.legendng1 {
    background: #E3F3E8;
    color: #59BD74;
}

.legend_box.legendng2 {
    background: #FFF2D9;
    color: #FFBC43;
}

.legend_box.legendng3 {
    background: #E3EBFF;
    color: #6A80F0;
}

.where_line_box {
    margin-bottom: 10px;
}

.where_input_box {
    padding: 10px 5px;
    padding-bottom: 5px;
    border-top: 1px solid #EAEFF1;
    border-right: 1px solid #EAEFF1;
}

.where_line_box .layui-form-item {
    margin-bottom: 0;
}

.where_input_box .layui-form-label {
    padding: 5px;
    font-size: 12px;
    width: auto;
}

.where_input_box .layui-input {
    height: 30px;
}

.where_line_box button {
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #9B9B9B;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    background: none;
    margin: 5px;
}

.where_line_box button.seachbtn {
    margin-left: 15px;
    background: #409EFF;
    border-color: #409EFF;
    color: #FFFFFF;
}

.chart_left {
    z-index: 999;
    position: absolute;
    left: 20px;
    width: 450px;
    height: 600px;
    top: 50%;
    margin-top: -300px;
}

.site_box {
    height: 47%;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 2px 0px 5px 0px rgba(58, 73, 154, 0.3);
    margin-top: 3%;
    position: relative;
}

.site_box_title {
    height: 40px;
    line-height: 40px;
    color: #3A499A;
    font-size: 14px;
    padding: 0 15px;
    text-align: left;
    font-weight: bold;
}

.site_box_content {
    position: absolute;
    top: 40px;
    bottom: 0;
    width: 100%;
}

.vehicle_box {
    width: 90%;
    margin: 0 auto;
    position: relative;
}

.vehicle_chart {
    width: 33%;
    float: left;
    height: 100%;
}

.chart_right {
    z-index: 999;
    position: absolute;
    right: 20px;
    width: 450px;
    height: 600px;
    top: 50%;
    margin-top: -300px;
}

.meter_title {
    width: 20%;
    color: #87C669;
    font-size: 12px;
    line-height: 96px;
    float: left;
}

.meter_chart {
    height: 100%;
    width: 70%;
    padding: 5px 0;
}

.meter_data {
    position: absolute;
    left: 55%;
    height: 60px;
    top: 50%;
    margin-top: -30px;
}

.meter_data p {
    color: #46AC4E;
    font-size: 12px;
    margin-top: 15px;
    line-height: 20px;
}

.meter_data p:first-child {
    margin-top: 0px;
}

.event_left {
    position: absolute;
    width: 23%;
    height: 100%;
    left: 4%;
    top: 0%;
}

.event_item {
    height: 35px;
    margin-top: 10px;
    padding: 3px 8px;
    border: 1px solid #28B0E6;
}

.event_item p {
    font-size: 12px;
    color: #27B0E6;
    line-height: 14px;
    text-align: left;
}

.event_item p.num {
    font-size: 14px;
}

.event_center {
    position: absolute;
    width: 48%;
    height: 100%;
    left: 28%;
}

.event_right {
    position: absolute;
    width: 20%;
    height: 220px;
    right: 4%;
    top: 50%;
    margin-top: -115px;
}

.event_right_item {
    margin-top: 30px;
}

.event_right_item p {
    font-size: 12px;
    color: #0E1A57;
    line-height: 16px;
}

.event_right_item p:last-child {
    height: 40px;
    background: rgba(58, 73, 154, 0.1);
    border: 1px solid #3A499A;
    text-align: center;
    line-height: 40px;
    color: #727CB3;
    font-size: 20px;
    font-family: Digital;
}

.event_right_item.c1 {
    padding-top: 10px;
}

.event_right_item.c1 p {
    color: #BB8E14;
}

.event_right_item.c1 p:last-child {
    color: #D2AC42;
    background: rgba(253, 209, 88, 0.2);
    border: 1px solid #DFAE27;
}

.event_right_item.c2 p {
    color: #1F899D;
}

.event_right_item.c2 p:last-child {
    color: #50B9CC;
    background: rgba(157, 232, 246, 0.2);
    border: 1px solid #30A3B9;
}

.infoBoxContent .title {
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
}

.infoBoxContent p b {
    width: 60px;
    display: inline-block;
    text-align-last: justify;
    text-align: justify;
    text-justify: distribute-all-lines;
}

.infoBoxContent p i {
    display: inline-block;
    width: 11px;
}

.flex_center {
    display: flex;
    align-items: center
}
.flex_grow1 {
    flex-grow: 1;
    max-width: 70px;
    min-width: 70px;
    text-align:justify;
}
.flex_grow1:after {
    display: inline-block;
    content: "";
}
.allpeople {
    flex-grow: 2;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #01A2E8 0%, #36F6FB 100%);
    border-radius: 0px 3px 3px 0px;
    text-align:left;
}
.online {
    flex-grow: 2;
    width: 65px;
    height: 5px;
    background: linear-gradient(90deg, #01A2E8 0%, #36F6FB 100%);
    border-radius: 0px 3px 3px 0px;
}
.offline {
    flex-grow: 2;
    width: 12px;
    height: 5px;
    background: linear-gradient(90deg, #D02D28 0%, #FC4945 100%);
    border-radius: 0px 3px 3px 0px;
}
.infoBoxContent_title {
    height:40px;
    line-height:40px;
    background-color:#4556B6;
    color: #fff;
    padding-left:20px;
}
.infoBox-content {
    color:#e1e1e1;
    padding:10px 20px 20px 20px;
}
.infoBoxContent:before {
    content: '';
    width: 0;
    height: 0;
    border: 17px solid transparent;
    border-top-color: #031c32;
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -20px;
}
.layui-btn{
    margin-left: 5px;
    margin-bottom: 5px;
}
.tree_box {
    position:absolute;left:93%;top:12vh;display:none;
}
    .tree_box .closetree {
        position:absolute;right:10px;top:5px;
        width:26px;height:26px;background:url(../img/x.png) no-repeat;
        background-size:100% 100%;z-index: 999;

    }
.tree_box .seach_box {
    height: 40px;
    width: 100%;
    z-index: 2;
    padding: 10px;
    position: absolute;
    top: 0;
    line-height: 1;
    border: 0px solid rgba(230,230,230,1);
    margin-top: 0px;
}

        .tree_box .seach_box input {
            width: 170px;
            height: 22px;
            border: 1px solid #2E80CC;
            border-radius: 1px;
            font-size: 12px;
            color: #fff;
            padding: 0 5px;
        }

        .tree_box .seach_box button {
            width: 52px;
            height: 20px;
            background: linear-gradient(0deg, #0F4777, #3893EA);
            border: 0;
            border-radius: 1px;
            text-align: center;
            line-height: 20px;
            color: #FFFFFF;
            font-size: 12px;
            margin-left: 10px;
            cursor: pointer;
        }

    .tree_box .tree {
        display: block;
        position: absolute;
        z-index: 2;
        top: 5px;
        right: 40px;
        width: 310px;
        height: 470px;
        padding: 40px 10px 10px 10px;
        background: linear-gradient( 187deg, #154079, #082a58);
        background-size: 100% 100%;
    }

        .tree_box .tree .treebox {
            height: 100%;
            overflow: auto;
        }
    .tree_box .dtree-nav-div cite {
        color:#fff
    }